<!--
 * @Author: xu xuejia
 * @Date: 2021-12-07 14:27:53
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 13:18:47
 * @Description: 初审项目详情页面
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\projectexam\ProjectDetail.vue
-->
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审核</el-breadcrumb-item>
      <el-breadcrumb-item v-if="flag =='1'" :to="{ name: 'FirstExam' }">项目初审</el-breadcrumb-item>
      <el-breadcrumb-item v-else :to="{ name: 'SecondExam' }">项目二审</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>项目初审</el-breadcrumb-item>-->
      <el-breadcrumb-item>项目详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--返回按钮区-->
    <div class="page">
      <el-button style="margin-bottom: 20px" round type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
      <!--logo项目名区-->
      <el-row :gutter="12" class="title">
        <el-col :span="3" class="colstyle">
          <img :src="logo" alt="" width="90" height="90">
        </el-col>
        <el-col :span="12" class="Titletext">{{ projectName }}</el-col>
        <el-col :span="12" class="Titletext"><el-tag>{{ list.departmentId }}</el-tag></el-col>
      </el-row>
      <!--项目信息表-->
      <div class="block">
        <div class="pjcard">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-management" />
              <span>项目信息</span>
            </div>
            <div class="text item">
              <span class="stitle">项目详细信息</span>
              <el-row>
                <el-col :span="4">项目级别：{{ levellist[list.levelId].name }}</el-col>
                <el-col :span="5">项目性质：{{ nature[list.natureId].name }}</el-col>
                <el-col :span="4">成果形式：{{ at[list.atId].name }}</el-col>
                <el-col :span="4">成果所属：{{ department[list.aodId].name }}</el-col>
                <el-col :span="4">结题形式：{{ ct[list.ctId].name }}</el-col>
              </el-row>
            </div>
            <div class="text item">
              <el-row>
                <el-col :span="4">所在单位：{{ list.departmentId }}</el-col>
                <el-col :span="5">计划时间：{{ getdata(list.planTime) }}</el-col>
                <el-col :span="4">项目经费：{{ list.outlay }}</el-col>
                <el-col :span="4">学科门类：{{ sc[list.scId].name }}</el-col>
                <el-col :span="4">一级学科：{{ subject[list.subjectId].name }}</el-col>
              </el-row>
            </div>
            <div class="text item" style="margin-top:px">
              <div><span class="stitle">项目概述</span></div>
              {{ introduction }}
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-custom" />
              <span>团队信息</span>
            </div>
            <div class="text item">
              <div><span class="stitle">团队成员</span></div>
              <!-- 团队成员：<span v-for="(item, index) in team" :key="index">{{ item.userRealname + ' ' }}</span> -->
              <el-table :data="list.team" style="width: 100%">
                <el-table-column prop="userRealname" label="成员姓名" width="180" />
                <!-- <template slot-scope="scope">
                    <el-row>
                      <el-col class="NameF">
                        <el-avatar :src="getuserimg(scope.row.userId).default" size="small" />
                        <span class="NameStyle">{{ scope.row.userRealname }}</span>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column> -->
                <el-table-column prop="userNumber" label="成员学号" width="180" />
                <el-table-column prop="username" label="成员昵称" width="180" />
                <el-table-column prop="userMobile" label="成员电话" width="180" />
                <el-table-column prop="userEmail" label="成员邮箱" width="180" />
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-flag" />
              <span>项目申报书</span>
            </div>
            <div v-for="(item, index) in urlKey" :key="index" class="text item">
              <a v-if="item !== 'logo'" :href="filearr[index]" download="附件.jpeg" target="_blank">{{ item }}</a>
              <el-button v-if="item !== 'logo'" v-preventReClick="3000" type="primary" style="margin-left:20px" size="mini" @click="downRow(filearr[index],urlKey[index])">下载</el-button></div>
            <!-- <el-button
            type="primary"
            icon="el-icon-download"
            style="float: right; margin-bottom: 10px"
            round
            @click="downRow()"
          >下载附件
          </el-button> -->
            <!-- <el-button style="float: right; padding: 3px 0" type="text">下载附件</el-button>-->
          </el-card>
          <!--通过不通过按钮-->
          <div v-if="yu===1" style="text-align: right;margin-top:30px;margin-bottom:20px;margin-right:80px;">
            <el-button v-preventReClick="3000" type="success" round @click="approved">通过</el-button>
            <!-- <div v-if="list.examineStatus === '未通过'" style="text-align: right;margin-top:30px;margin-bottom:20px;margin-right:80px;">
              <el-button v-preventReClick="3000" type="success" round @click="approved">通过</el-button>
              <el-button type="danger" round>不通过</el-button> -->
          </div>
          <div v-else-if="yu===2" style="text-align: right;margin-top:30px;margin-bottom:0px;margin-right:80px;">
            <el-button type="info" round>项目已初审</el-button>
          </div>
          <div v-if="list.examineStatus === '复审通过'" style="text-align: right;margin-top:30px;margin-bottom:0px;margin-right:80px;">
            <el-button type="info" round>项目已复审</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import $ from 'juery'
// import fileDownload from 'js-file-download'
// import download from '../../assets/js/download.js'
// import download from 'downloadjs'
import axios from 'axios'
export default {
  name: 'Projectdetail',
  data() {
    return {
      projectName: this.$route.params.data,
      peId: this.$route.params.key,
      logo: this.$route.params.Logo,
      // projectId: '2',
      introduction: this.$route.params.Introduction,
      list: this.$route.params.List,
      team: this.$route.params.Team,
      userId: '',
      flag: 1,
      filearr: [],
      urlKey: [],
      yu: false,
      levellist: [],
      sc: [],
      nature: [],
      ct: [],
      at: [],
      subject: [],
      department: []
    }
  },
  created() {
    this.projectName = JSON.parse(sessionStorage.getItem('data'))
    this.peId = JSON.parse(sessionStorage.getItem('key'))
    this.team = JSON.parse(sessionStorage.getItem('Team'))
    this.logo = JSON.parse(sessionStorage.getItem('Logo'))
    this.introduction = JSON.parse(sessionStorage.getItem('Introduction'))
    this.list = JSON.parse(sessionStorage.getItem('List'))
    // console.log('list', this.list)
    // this.getLogo()
    this.getUser()
    if (window.sessionStorage.getItem('activePath') === '/hnWCDth/rmuSQzEO8WEG3Q==') {
      this.flag = 2
    } else if (window.sessionStorage.getItem('activePath') === 'AlZzOgmzPcxaSsnuP+XA4Q==') {
      this.flag = 1
    }
    this.bytntype()
    this.getalldictonary()
  },
  mounted() {
    /**
     * @description: 将fileMap中的键值分别取出
     * @param {*} const
     * @return {*}
     * @author: xu xuejia
     */
    for (const i in this.list.fileMap) {
      // const o = {}
      // o[i] = this.list.fileMap[i]
      // this.filearr.push(o)

      this.filearr.push(this.list.fileMap[i]) // 取出fileMap中的值
    }
    this.urlKey = Object.keys(this.list.fileMap) // 取出fileMap中的键
    // for (const i in this.urlKey) {  // 将logo变为logo.png
    //   if (this.urlKey[i] === 'logo') {
    //     this.urlKey[i] = 'logo.png'
    //   }
    // }
  },
  methods: {
    /**
     * @description: 审核按钮状态
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    bytntype() {
      if ((this.list.statusId === 1 && this.flag === 1) || (this.list.statusId === 2 && this.flag === 2)) {
        this.yu = 1
      } else if ((this.list.statusId === 2 && this.flag === 1)) {
        this.yu = 2
      } else if (((this.list.statusId === 3 || this.list.statusId === 4) && this.flag === 2)) {
        this.yu = 3
      }
    },
    /**
     * @description: 用户头像
     * @param {*} row
     * @return {*}
     * @author: xu xuejia
     */
    async getuserimg(row) {
      var userimg = ''
      await axios.get('/user/getImage', { params: { userId: row }})
        .then((res) => {
          // userimg = res.data.data
          const validate = Promise.resolve(res)
          // console.log(Promise.resolve(res))
          validate.then((result) => {
            userimg = result.data.data
            // console.log(result.data.data)
          })
        })
        .catch(err => {
          console.error(err)
        })
      // console.log(userimg)
      return userimg
    },
    // async getuserimg(row) {
    //   var userimg = ''
    //   await axios.get('/user/getImage', { params: { userId: row }})
    //     .then((res) => {
    //       // userimg = res.data.data
    //       const validate = Promise.resolve(res)
    //       console.log(Promise.resolve(res))
    //       validate.then((result) => {
    //         userimg = result.data.data
    //         console.log(result.data.data)
    //       })
    //     })
    //     .catch(err => {
    //       console.error(err)
    //     })
    //   console.log(userimg)
    //   return userimg
    // },
    /**
     * @description: 文件下载
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 文件下载
    downRow(url, urlname) {
      // const that = this
      const oReq = new XMLHttpRequest()
      oReq.open('GET', url, true)
      oReq.responseType = 'blob'
      // oReq.withCredentials = true;//如果跨域
      oReq.onload = function(oEvent) {
        const content = oReq.response
        const elink = document.createElement('a')
        // var str = url
        // if (str.indexOf('png') !== -1 || str.indexOf('jpg') !== -1) {
        //   elink.download = '项目附件.png'
        // } else elink.download = urlname
        elink.download = urlname
        elink.style.display = 'none'
        const blob = new Blob([content])
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      }
      oReq.send()
    },
    // 返回按钮
    back() {
      this.$router.go(-1)
    },
    /**
     * @description: 审核
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 审核
    approved() {
      axios.get(`pe/approved/${this.flag}`, { params: { peId: this.peId, reviewerId: this.userId }})
        .then(() => {
          this.$message({
            message: '审核成功！',
            type: 'success',
            offset: 280
          })
          this.back()
        }).catch(error => {
          console.log(error)
        })
    },
    getUser() {
      axios.get('/user/')
        .then((response) => {
          this.userId = response.data.data.userId
        }).catch(error => {
          console.log(error)
        })
    },
    /**
     * @description: 转换所需id
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 转时间
    getdata(data) {
      var date = new Date(data)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    // 转各种id
    getalldictonary() {
      // console.log(this.$store.getters.getlevel)
      this.levellist = JSON.parse(this.$store.getters.getlevel)
      this.nature = JSON.parse(this.$store.getters.getnature)
      this.at = JSON.parse(this.$store.getters.getat)
      this.department = JSON.parse(this.$store.getters.getdepartment)
      if (this.flag === 2) {
        this.list.departmentId = this.department[this.list.departmentId].name
      }

      this.ct = JSON.parse(this.$store.getters.getct)
      this.sc = JSON.parse(this.$store.getters.getsc)
      this.subject = JSON.parse(this.$store.getters.getsubject)
    }
    // getlevelName(data) {
    //   this.levellist = JSON.parse(this.$store.getters.getlevel)
    //   console.log(this.levellist)
    //   if (this.levellist[data] === null) {
    //     return null
    //   } else return this.levellist[data].name
    // },
    // getnatureName(data) {
    //   this.nature = JSON.parse(this.$store.getters.getnature)
    //   if (this.nature[data] === null) {
    //     return null
    //   } else return this.nature[data].name
    // },
    // getatName(data) {
    //   this.at = JSON.parse(this.$store.getters.getat)
    //   if (this.at[data] === null) {
    //     return null
    //   } else return this.at[data].name
    // },
    // getdepartmentName(data) {
    //   this.department = JSON.parse(this.$store.getters.getdepartment)
    //   if (this.department[data] === null) {
    //     return null
    //   } else return this.department[data].name
    // },
    // getctName(data) {
    //   console.log(this.$store.getters.getct)
    //   this.ct = JSON.parse(this.$store.getters.getct)
    //   if (this.ct[data] === null) {
    //     return null
    //   } else return this.ct[data].name
    // },
    // getscName(data) {
    //   this.sc = JSON.parse(this.$store.getters.getsc)
    //   if (this.sc[data] === null) {
    //     return null
    //   } else return this.sc[data].name
    // },
    // getsubjectName(data) {
    //   this.subject = JSON.parse(this.$store.getters.getsubject)
    //   if (this.subject[data] === null) {
    //     return null
    //   } else return this.subject[data].name
    // }

  }
}

</script>
<style lang="scss" scoped>
.Titletext{
  font-size: 20px;
  color: rgb(12, 5, 5);
  font-weight:bold;
}
.colstyle{
   vertical-align: middle;
}
.clearfix{
  font-size:15px;
  color:black;
  font-weight:bold;
}
 .text {
    font-size: 14px;
    line-height: 30px;
    /* text-indent: 2rem; */
  }

  .item {
    margin-bottom: 3px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-left:5px solid tomato;
  }
  .block {
    background-color: whitesmoke;
    height:100%;
    padding-bottom:20px;
    border-top:50px solid transparent;
  }
  /* .page {
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
  } */
  /* .title {
    width: 100%;
    height: 130px;
    border-radius: 10px;
    margin-left: 0px;
    margin-bottom: 5px;
  }*/
  .pjcard {
   margin-top: 20px;
   margin-bottom:30px;
   border-top:1px solid transparent;
  }
  .stitle {
  position: relative;
  padding-left: 13px;
  margin: 24px 0;
  font-weight: bold;
  line-height: 30px;
}
.stitle:before {
  content: "";
  background-color: tomato;
  width: 4px;
  height: 14px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.NameStyle{
   text-align: top;
   vertical-align: middle;
   margin-top: auto;
   margin-bottom: auto;
   display:inline-block;
   align-self:center
}
.NameF{
  display:flex
}
</style>
